<template>
  <div>
    <!-- div 是可以纵向滚动的，并且滚动到底之后，出发 nextPageAction 方法 -->
    <slot />
    <!-- loading box -->
    <template v-if="showLoading">
      <div v-if="end" class="">
        <span>暂无数据</span>
      </div>
      <div
        v-else
        class="loader"
        style="padding: 20px;text-align: center;"
      ></div>
    </template>
    <!-- 无数据页面 -->
    <!-- 错误页面 -->
  </div>
</template>

<script>
const defaultOptions = {
  errorIcon: "",
  errorText: "请求异常，请尝试刷新~",
  emptyDataIcon: "",
  emptyDataText: "暂无数据可供客官浏览~"
};
export default {
  name: "base-list",
  data() {
    return {
      size: 10,
      current: 1,
      defaultOptions: {}
    };
  },
  props: {
    nextPageAction: {
      // 下一页的请求方法，该方法需要返回一个 Promise 对象
      type: Function,
      isRequired: true
    },
    immed: {
      // 是否以及执行 nextPageAction 方法
      type: Boolean,
      default: true
    },
    pageSize: {
      // 每页数据长度
      type: Number,
      default: 10
    },
    currentPage: {
      // 当前页
      type: Number,
      default: 1
    },
    options: Object, // 其他配置
    end: {
      // 是否没有数据了
      type: Boolean,
      default: false
    },
    showLoading: {
      type: Boolean,
      default: true
    }
  },
  created() {
    this.size = this.pageSize;
    this.current = this.currentPage;
    Object.assign(this.defaultOptions, defaultOptions, this.options);
  },
  mounted() {
    if (this.immed) {
      // 需要立即执行查询分页的方法
      this._nextPageAction();
    } else {
      this.size++;
    }
  },
  methods: {
    _nextPageAction() {
      const isFirstPage = this.current === 1;
      this.nextPageAction({
        pageSize: this.size,
        currentPage: this.current
      })
        .then(data => {
          // 方法执行成功
          if (isFirstPage && data.length === 0) {
            // 没有数据，应该显示为空数据页面
          }
          this.size++;
        })
        .catch(e => {
          // 方法执行失败
          if (isFirstPage) {
            // 第一次请求失败，显示错误的页面，让用户重新刷新
            return;
          }
          // 不是第一页，应该以弹窗的形式告知用户请求列表失败
          // 并且 size 不 +1，用户再次触底时进行二次请求
          this.$message.error(e.message);
        });
    }
  }
};
</script>
